Merge branch 'nfc'

7 files changed, 130 insertions, 43 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index df9b9ad8..fe12a124 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -46,18 +46,20 @@
 	let toggleBio = () => (hideBio = false);
 </script>
 
-<div class="container mx-auto w-full px-4 mb-4 flex flex-wrap lg:flex-nowrap">
+<div class="container mx-auto w-full px-4 mb-4 flex flex-wrap lg:flex-nowrap space-y-5">
 	<div class="hidden lg:block w-[240px] lg:mr-10" />
-	<div class="w-[240px] lg:absolute space-y-5 left-20 mx-auto lg:mr-10 mb-10">
+	<div class="w-[240px] lg:absolute space-y-5 left-20 mx-auto lg:mr-10">
 		<h1 class="text-3xl font-bold text-center mx-auto">{display || username}</h1>
 
+    {#if subject.address}
 		<div
 			class="text-secondary mx-auto text-center lg:text-left lg:mx-0"
 			class:line-clamp-3={hideBio}
 			on:click={toggleBio}
 		>
-			{subject.address && subject.address !== 'null' ? subject.address : ''}
+    {subject.address}
 		</div>
+    {/if}
 
 		<div class="flex justify-around">
 			<a href={`/${subject.pubkey}/follows`}
@@ -80,7 +82,7 @@
 						>
 							<div class="mx-auto flex">
 								<Icon icon={'profile'} style="my-auto h-6 mr-2 invert" />
-								<div class="my-auto mt-1">{$t('user.following')}</div>
+								<div class="my-auto">{$t('user.following')}</div>
 							</div>
 						</button>
 					</div>
@@ -92,7 +94,7 @@
 						>
 							<div class="mx-auto flex">
 								<Icon icon={'profile'} style="my-auto h-6 mr-2" />
-								<div class="my-auto mt-1">{$t('user.follow')}</div>
+								<div class="my-auto">{$t('user.follow')}</div>
 							</div>
 						</button>
 					</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 0b09f85c..6e8318f7 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -81,46 +81,47 @@
 <div class="space-y-8">
 	{#if user?.id === subject.id}
 		<div>
-			<div class="flex justify-center lg:justify-start">
+			<div class="flex justify-center lg:justify-start mb-8">
 				<Balance {user} />
 			</div>
+
 			{#if !user.balance}
-				<div class="space-y-8 mt-8">
+				<div>
 					<p class="text-secondary text-lg">
           {$t("user.welcome")}
 					</p>
+				</div>
+			{/if}
 
-					<div class="flex gap-4 justify-center w-full">
-						<a href={`/${user.username}/receive`}>
-							<button
-								class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white"
-							>
-								<div class="mx-auto flex">
-									<Icon icon="numpad" style="my-auto h-6 mr-2 invert" />
-                  <div class="my-auto mt-1">{$t("user.requestPayment")}</div>
-								</div>
-							</button>
-						</a>
+			<div class="flex gap-4 justify-center w-full">
+				<a href={`/${user.username}/receive`}>
+					<button
+						class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white"
+					>
+						<div class="mx-auto flex">
+							<Icon icon="numpad" style="my-auto h-6 mr-2 invert" />
+              <div class="my-auto mt-1">{$t("user.requestPayment")}</div>
+						</div>
+					</button>
+				</a>
 
-						{#if user.eligible}
-							<a href={`/buy`}>
-								<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
-									<div class="mx-auto flex">
-										<!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
+				{#if user.eligible}
+					<a href={`/buy`}>
+						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+							<div class="mx-auto flex">
+								<!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
 
-										<img
-											src="/images/bitcoin.svg"
-											class="w-8 border-4 border-transparent mr-2"
-											alt="Bitcoin"
-										/>
-										<div class="my-auto mt-1">Buy Bitcoin</div>
-									</div>
-								</button>
-							</a>
-						{/if}
-					</div>
-				</div>
-			{/if}
+								<img
+									src="/images/bitcoin.svg"
+									class="w-8 border-4 border-transparent mr-2"
+									alt="Bitcoin"
+								/>
+								<div class="my-auto mt-1">Buy Bitcoin</div>
+							</div>
+						</button>
+					</a>
+				{/if}
+			</div>
 		</div>
 	{/if}
 
diff --git a/src/routes/(app)/[username]/card/[serial]/+page.server.js b/src/routes/(app)/[username]/card/[serial]/+page.server.js
new file mode 100644
index 00000000..e2569536
--- /dev/null
+++ b/src/routes/(app)/[username]/card/[serial]/+page.server.js
@@ -0,0 +1,16 @@
+import { auth, get } from '$lib/utils';
+import { redirect } from "@sveltejs/kit"
+
+export let load = async ({ cookies, params }) => {
+	let { serial } = params;
+	let pot;
+	try {
+		pot = await get(`/pot/${serial}`, auth(cookies));
+	} catch (e) {
+		console.log(e);
+	}
+
+	if (pot) throw redirect(307, `/pot/${serial}`);
+
+	return params;
+};
diff --git a/src/routes/(app)/[username]/card/[serial]/+page.svelte b/src/routes/(app)/[username]/card/[serial]/+page.svelte
new file mode 100644
index 00000000..aee3be28
--- /dev/null
+++ b/src/routes/(app)/[username]/card/[serial]/+page.svelte
@@ -0,0 +1,35 @@
+<script>
+	import { Card, Icon } from '$comp';
+	export let data;
+	let { serial } = data;
+	let balance = 0;
+</script>
+
+<div class="space-y-5">
+<div class="relative flex justify-center gap-2">
+	<h1 class="text-2xl md:text-3xl font-semibold my-auto">Card {serial}</h1>
+</div>
+<div class="flex justify-center">
+	<a href={`/send/pot/${serial}`}>
+		<button
+			class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white justify-center gap-2"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="invert text-black peer-placeholder-shown:text-gray-300 h-6 w-6 my-auto"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+				/>
+			</svg>
+			<div class="my-auto">Add Funds</div>
+		</button>
+	</a>
+</div>
+</div>
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
index fff2b22c..1a1191a1 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
@@ -11,6 +11,15 @@
 
 	export let data;
 
+	let ndef;
+
+	let reading = async ({ message, serialNumber }) => {
+		let name = serialNumber.replace(/:/g, '-');
+		let result = await post(`/pot/${name}/withdraw`, { amount, hash, name });
+	};
+
+	let readingerror = (e) => console.log('nfc error', e);
+
 	$: refresh(data);
 	let { invoice, id, user, sm, lg } = data;
 	let {
@@ -33,7 +42,7 @@
 	let qr;
 	let tipPercent = 0;
 
-	let refresh = (data) => {
+	let refresh = async (data) => {
 		({ invoice, id, user, sm, lg } = data);
 		({
 			amount,
@@ -48,19 +57,43 @@
 		} = invoice);
 
 		tipPercent = (tip / amount) * 100;
+
+		if (browser) {
+			try {
+				ndef = new NDEFReader();
+				await ndef.scan();
+
+				ndef.removeEventListener('readingerror', readingerror);
+				ndef.removeEventListener('reading', reading);
+
+				ndef.addEventListener('readingerror', readingerror);
+				ndef.addEventListener('reading', reading);
+			} catch (e) {
+				console.log(e);
+			}
+      }
 	};
 
 	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
 	$: tipAmount = ((tip * rate) / sats).toFixed(2);
 
 	let subbed;
-	onMount(() => {
-		browser &&
+
+	onMount(async () => {
+		if (browser) {
 			last.subscribe((v) => {
 				if (!v || subbed) return;
 				subbed = true;
 				send('subscribe', invoice);
 			});
+		}
+	});
+
+	onDestroy(() => {
+		if (ndef) {
+			ndef.removeEventListener('readingerror', readingerror);
+			ndef.removeEventListener('reading', reading);
+		}
 	});
 
 	$: link = type === 'bitcoin' ? text : `lightning:${text}`;
diff --git a/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
index c9619cee..969fb6c7 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <div class="container px-4 text-center mx-auto">
-	<div class="flex w-full py-20 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
+	<div class="flex w-full py-5 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
 		<Icon icon="check" style="mx-auto" />
 	</div>
 	{#if received}
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index 744b35ec..bdfcbb04 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -163,12 +163,12 @@
 
 						<div class="flex my-auto">
 							{#if p.type === types.pot}
-								<a href={`/pot/${p.pot}`}>
+								<a href={`/pot/${p.memo}`}>
 									<div class="text-secondary flex">
 										<div class="my-auto mr-1">
 											<img
-												src="/icons/logo-symbol.svg"
-												class="w-12 border-4 border-transparent"
+												src="/images/moneypot.png"
+												class="w-12"
 												alt="Pot"
 											/>
 										</div>